<template>
  <a-table
    v-bind="tableProps"
  >
    <a slot="number" slot-scope="text, row" @click="hanlderRow(row)">{{ text }}</a>

    <template #status="text, row">
      <a @click="hanlderRow(row)"><i :class="`icon icon--${text === 1 || text === 5 ? 'red' : ''}`" />{{ text | status }}</a>
    </template>
  </a-table>
</template>
<script>
import { geAllTasks } from '@/api/flow/work'
import table from '@/utils/mixins/search/table'
import columns from '@/views/credit/loan/mixins/columns'

export default {
  mixins: [table, columns],

  data () {
    return {
      columns: [
        {
          title: '订单号',
          dataIndex: 'number',
          width: '200px',
          ellipsis: true,
          align: 'center',
          scopedSlots: { customRender: 'number' },
        },
        {
          title: '姓',
          dataIndex: 'last_name',
          width: '60px',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '名',
          dataIndex: 'first_name',
          width: '60px',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '手机号',
          dataIndex: 'mobile',
          width: '160px',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '邮箱',
          dataIndex: 'email',
          width: '160px',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '申请时间',
          dataIndex: 'create_time',
          width: '160px',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '借款金额/$',
          dataIndex: 'borrow_money',
          width: '160px',
          align: 'center',
          ellipsis: true,
        },
        // {
        //   title: '借款总期限',
        //   dataIndex: '还款方式（调接口）',
        //   width: '160px',
        //   align: 'center',
        //   ellipsis: true,
        // },
        {
          title: '手续费/$',
          dataIndex: 'poundage',
          width: '160px',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '利息比例/%',
          dataIndex: 'interest',
          width: '160px',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '滞纳金比例/%',
          dataIndex: 'delay_payment',
          width: '160px',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '借款状态',
          dataIndex: 'status',
          width: '160px',
          scopedSlots: { customRender: 'status' },
          align: 'center',
          fixed: 'right',
        },
      ],
    }
  },

  filters: {
    status (value) {
      switch (value) {
        case 1:
          return '审核拒绝'

        case 2:
          return '审核通过'

        case 3:
          return '审核中'

        case 4:
          return '已拨款'

        case 5:
          return '拨款失败'

        default:
          return '/'
      }
    },
  },

  created () {
    this.tableHooksRequest()
  },

  computed: {
    tableParams () {
      const { per_page, page } = this.pagination
      return [per_page, page, this.tableArgs]
    },
  },

  methods: {
     async tableHooksRequest () {
      try {
        const res = await this.getTableDatas(geAllTasks, this.tableParams)
        return res
      } catch (error) {
        throw new Error(error)
      }
    },

    // hanlder row
    hanlderRow ({ task_id: tid }) {
      this.$router.push({
        name: 'ExamineAwaitContent',
        params: { tid },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.icon {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: $theme-color;
  margin-right: $margin-base;
}

.icon--red {
  background-color: $red;
}
</style>
